<template>
  <el-dialog v-model="showDelayOrder" width="600px" center :show-close="false">
    <template #header>
      <div class="header">
        <title-view title="开客户延期单" />
        <el-icon size="16px" style="cursor: pointer" @click="handleCancel"><Close /></el-icon>
      </div>
    </template>
    <el-form class="form" ref="formRef" :model="formData" :rules="planRules" label-width="150px" v-loading="isLoading">
      <el-form-item label="延期天数" prop="day">
        <el-input type="number" v-model="formData.day" placeholder="请输入延期天数"></el-input>
      </el-form-item>
      <el-form-item label="延期原因" prop="cause">
        <el-input v-model="formData.cause" style="width: 100%" :autosize="{ minRows: 3 }" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <div class="form-tips"><span>客户小程序会收到延期单</span><span>确认后，合同工期及计划完成时间会自动顺延</span></div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="width: 92px; background-color: #f2f3f5" @click="handleCancel" size="default">取消 </el-button>
        <el-button style="width: 92px" :disabled="isLoading" type="primary" @click="handleConfirm" size="default">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { Close } from "@element-plus/icons-vue";
import { submitDelay } from "@/apis/constructionPlan";

const route = useRoute();
const customerId = route.query.customerId;

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const showDelayOrder = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue", "stopWorkSave"]);

//表单相关
const formData = ref({
  customerId,
  day: "",
  cause: ""
});
const planRules = {
  day: [
    { required: true, message: "请输入延期天数", trigger: "blur" },
    { validator: (rule, value, callback) => validatePositiveInteger(rule, value, callback), trigger: "blur" }
  ],
  cause: { required: true, message: "请输入延期原因", trigger: "blur" }
};
const validatePositiveInteger = (rule, value, callback) => {
  value = Number(value);
  if (!Number.isInteger(value) || value <= 0) {
    callback(new Error("请输入正整数"));
  } else {
    callback();
  }
};

//按钮操作
const isLoading = ref(false);
const handleCancel = () => {
  showDelayOrder.value = false;
};
const handleConfirm = () => {
  proxy.$refs.formRef.validate(async valid => {
    if (!valid) return proxy.$modal.msgError("请完善信息");
    isLoading.value = true;
    await submitDelay(formData.value);
    proxy.$modal.msgSuccess("已开客户延期单，待客户确认后生效");
    showDelayOrder.value = false;
    emit("makeDelayOrderSave");
  });
};
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.header {
  display: flex;
  justify-content: space-between;
}
.form {
  :deep(.el-input__wrapper),
  :deep(.el-textarea__inner) {
    box-shadow: none;
  }
  .form-tips {
    font-size: 14px;
    color: #86909c;
    margin-top: -10px;
    span {
      display: block;
      &:last-child {
        margin-top: -10px;
      }
    }
  }
}
</style>
